import React from 'react';
import { useNavigate } from 'react-router';
import { Link } from 'react-router-dom';
import { Button, Checkbox, Form, Input } from 'antd';
import { LockOutlined, UserOutlined, HomeOutlined } from '@ant-design/icons';
import $ from 'jquery';
import intl from 'react-intl-universal';
import { storage } from '../utils/localstorage';
import 'antd/dist/antd.min.css';
import './login.css';


const LoginPage = () => {
    const navigate = useNavigate();

    // 将登录用户的信息保存下来：{uid:xx, username:xx, roles:{roleName:[xx, xx], roleMenu:[xx, xx]}}
    const storeMenu = (data) => {
        const roleName = [];
        const tempMenu = [];
        data.roles.map((role) => {
            roleName.push(role.roleName);
            if (role.roleMenu !== null && role.roleMenu !== undefined && role.roleMenu !== '') {
                role.roleMenu.split(',').map((item) => {
                    tempMenu.push(item);
                });
            }
        });
        if (tempMenu.length === 0) {                    // 角色未分配菜单，使用默认菜单
            tempMenu.push('主页');
            tempMenu.push('知识库');
            tempMenu.push('文章管理');
        }
        const roleMenu = [...new Set(tempMenu)];          // 角色菜单去重
        storage.set('user', {
            uid: data.uid,
            username: data.username,
            roles: {
                roleName: roleName,
                roleMenu: roleMenu,
            },
        });
    };

    const onFinish = (values) => {
        $.ajax({
            url: '/login',
            data: {
                username: values.username,
                password: values.password
            },
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                if (data.status === 1) {
                    storeMenu(data.data);
                    navigate('/home/main');
                } else {
                    alert("登录失败：" + data.msg);
                }
            },
            error: function(error) {
                let err = JSON.stringify(error);
                alert(err);
            }
        });
    };

    return (
        <div className='loginPage'>
            <div className='loginForm'>
                <Form name="normal_login" className="login-form" initialValues={{ remember: true, }} onFinish={onFinish}>
                    <Form.Item name="username" rules={[{ required: true, message: 'Please input your Username!', },]}>
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!', },]}>
                        <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="Password" />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>
                        {/* <a className="login-form-forgot" href="#">Forgot password</a> */}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                        {/* Or <a href="#">register now!</a> */}
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default LoginPage;

